<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-19 16:14:15
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-03 10:21:33
 * @FilePath: \cxl-driving-training\src\components\dict\Index.vue
-->
<template>
    <span
        class="tag"
        :style="{ backgroundColor: dictData.color + '15', color: dictData.color }"
        v-if="dictData.value"
        >{{ dictData.value }}</span
    >
</template>
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
const dictData = reactive({ color: '', value: '' })
//接收父级传递的参数
const props = defineProps(['data', 'value'])
//监听参数变化
watchEffect(() => {
    props.data.forEach((element: any) => {
        if (element.value === props.value) {
            dictData.value = element.label
            dictData.color = element.color
        }
    })
})
</script>

<style scoped>
.tag {
    padding: 4px 8px;
    line-height: 24px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
    box-sizing: border-box;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.02);
}
</style>
